<template>
  <div class="container" id="home">
    <header class="heder">
      <template v-for="(item, index) in list" :key="item.path">
        <div
          class="center"
          @click="change2(item.path, index)"
          :style="style(item.path)"
        >
          {{ item.name }}
        </div>
      </template>
    </header>
    <aside>
      <router-view />
    </aside>
  </div>
</template>

<script lang="ts">
import {
  computed,
  defineComponent,
  onMounted,
  onUnmounted,
  ref,
  watch,
} from "vue";
import { useRouter, useRoute } from "vue-router";

export default defineComponent({
  created() {},
  mounted() {
    const node = document.getElementById("home");
    console.log(node);
  },
  setup() {
    const list = JSON.parse(localStorage.getItem("router") as any);
    const router = useRouter();
    const route = useRoute();
    let path2 = ref("/");
    const node = document.getElementById("home");
    console.log(node);
    watch(
      () => route.path,
      (a, b) => {
        console.log(a);
        path2.value = a;
        console.log(b);
      },
      { immediate: true }
    );
    onMounted(() => {
      const node = document.getElementById("home");
      console.log(node);
    });
    const change2 = (path: string, index: number) => {
      router.push({ path: path });
      console.log(path2.value);
    };
    const style = computed(() => (path: string) =>
      path === path2.value ? { color: "pink" } : { color: "#fff" }
    );

    return {
      list,
      change2,
      style,
    };
  },
});
</script>


<style lang="less" scoped>
.container {
  // background-color: #acbcd6;
  position: absolute;
  width: 100%;
  height: 100%;
  text-align: center;
  // background-color: #121c30;
  .heder {
    width: 100%;
    display: flex;
    height: 1rem;
    align-items: center;
    background-color: pink;
    div {
      margin-left: 1rem;
      background-color: #ccc;
      height: 100%;
      width: 2rem;
    }
  }
}
</style>
